<template>
	<view class="register-container">
		<!-- 顶部Logo区域 -->
		<view class="logo-area">
			<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
			<text class="title">账号注册</text>
		</view>

		<!-- 注册表单 -->
		<view class="form-container">
			<view class="input-item">
				<uni-icons type="person" size="20" color="#999"></uni-icons>
				<input type="number" v-model="form.mobile" placeholder="请输入手机号" maxlength="11" />
			</view>

			<view class="input-item">
				<uni-icons type="locked" size="20" color="#999"></uni-icons>
				<input type="password" v-model="form.password" placeholder="请输入密码" />
			</view>

			<view class="input-item">
				<uni-icons type="locked" size="20" color="#999"></uni-icons>
				<input type="password" v-model="form.confirmPassword" placeholder="请确认密码" />
			</view>

			<view class="user-type-selector">
				<text class="selector-label">请选择用户类型：</text>
				<view class="radio-group">
					<view class="radio-item" @click="form.userType = 0">
						<view class="radio-circle" :class="{ 'selected': form.userType === 0 }"></view>
						<text>学生</text>
					</view>
					<view class="radio-item" @click="form.userType = 1">
						<view class="radio-circle" :class="{ 'selected': form.userType === 1 }"></view>
						<text>维修工</text>
					</view>
				</view>
			</view>

			<button class="register-btn" @click="handleRegister">注册</button>

			<view class="login-link">
				<text @click="goToLogin">已有账号？立即登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					mobile: '',
					password: '',
					confirmPassword: '',
					userType: ''
				}
			}
		},
		methods: {
			async handleRegister() {
				// 表单验证
				if (!this.form.mobile || !/^1\d{10}$/.test(this.form.mobile)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}
				if (!this.form.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					return
				}
				if (this.form.password !== this.form.confirmPassword) {
					uni.showToast({
						title: '两次输入的密码不一致',
						icon: 'none'
					})
					return
				}
				if (!this.form.userType) {
					uni.showToast({
						title: '请选择用户类型',
						icon: 'none'
					})
					return
				}

				try {
					const res = await this.$http.post('/api/register', {
						mobile: this.form.mobile,
						password: this.form.password,
						userType: this.form.userType
					})

					if (res.code === 0) {
						uni.showToast({
							title: '注册成功',
							icon: 'success'
						})

						// 注册成功后跳转到登录页
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/login/index'
							})
						}, 1500)
					} else {
						uni.showToast({
							title: res.msg || '注册失败',
							icon: 'none'
						})
					}
				} catch (error) {
					uni.showToast({
						title: '注册失败，手机号重复',
						icon: 'none'
					})
				}
			},

			goToLogin() {
				uni.redirectTo({
					url: '/pages/login/index'
				})
			}
		}
	}
</script>

<style>
	.register-container {
		min-height: 100vh;
		padding: 60rpx 40rpx;
		background-color: #fff;
	}

	.logo-area {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 80rpx;
	}

	.logo {
		width: 160rpx;
		height: 160rpx;
		margin-bottom: 20rpx;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.form-container {
		margin-top: 60rpx;
	}

	.input-item {
		display: flex;
		align-items: center;
		height: 100rpx;
		padding: 0 30rpx;
		margin-bottom: 30rpx;
		background-color: #f8f8f8;
		border-radius: 50rpx;
	}

	.input-item uni-icons {
		margin-right: 20rpx;
	}

	.input-item input {
		flex: 1;
		font-size: 28rpx;
	}

	.register-btn {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		margin-top: 60rpx;
		background-color: #2B65FE;
		color: #fff;
		font-size: 32rpx;
		border-radius: 45rpx;
	}

	.login-link {
		margin-top: 30rpx;
		text-align: center;
	}

	.login-link text {
		color: #2B65FE;
		font-size: 28rpx;
	}

	.user-type-selector {
		margin-bottom: 30rpx;
	}

	.selector-label {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
	}

	.radio-group {
		display: flex;
		justify-content: space-around;
		padding: 20rpx 0;
	}

	.radio-item {
		display: flex;
		align-items: center;
		padding: 10rpx 20rpx;
	}

	.radio-circle {
		width: 36rpx;
		height: 36rpx;
		border: 2rpx solid #2B65FE;
		border-radius: 50%;
		margin-right: 10rpx;
		position: relative;
	}

	.radio-circle.selected::after {
		content: '';
		position: absolute;
		width: 24rpx;
		height: 24rpx;
		background-color: #2B65FE;
		border-radius: 50%;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.radio-item text {
		font-size: 28rpx;
		color: #333;
	}
</style>